<script setup lang="ts">
import { ref, onMounted } from "vue";
//import { alarmNum } from "@/api";
import { graphic } from "echarts/core";
import { ElMessage } from "element-plus";

const option = ref({});
const getData = () => {
  var res = {
    "success": true,
    "data": {
      "dateList": [
        "2021-11-01", "2021-11-02", "2021-11-03", "2021-11-04", "2021-11-05", "2021-11-06", "2021-11-07",
        "2021-11-08", "2021-11-09", "2021-11-10", "2021-11-11", "2021-11-12", "2021-11-13", "2021-11-14",
        "2021-11-15", "2021-11-16", "2021-11-17", "2021-11-18", "2021-11-19", "2021-11-20", "2021-11-21",
        "2021-11-22", "2021-11-23", "2021-11-24", "2021-11-25", "2021-11-26", "2021-11-27", "2021-11-28",
        "2021-11-29", "2021-11-30",
      ],
      "op60yieldList": [
        98.2, 97.5, 96.8, 98.0, 97.3, 96.5, 97.9,
        98.1, 97.2, 96.9, 97.7, 98.3, 97.1, 96.7,
        97.4, 98.5, 97.8, 96.6, 97.0, 98.2, 97.6,
        96.4, 97.3, 98.1, 97.9, 96.8, 97.5, 98.0,
        97.1, 96.9
      ],
      "op130yieldList": [
        95.8, 96.5, 97.1, 95.6, 96.2, 97.3, 96.8,
        95.9, 96.7, 97.0, 96.1, 95.7, 96.9, 97.2,
        96.3, 95.5, 96.6, 97.4, 96.0, 95.8, 96.4,
        97.1, 96.5, 95.9, 96.8, 97.3, 96.2, 95.6,
        96.7, 97.0
      ],
      "op140yieldList": [
        92.5, 93.8, 94.2, 93.1, 92.8, 94.5, 93.9,
        92.6, 93.7, 94.1, 93.0, 92.7, 94.3, 93.5,
        92.9, 94.0, 93.6, 92.4, 93.3, 94.4, 93.2,
        92.6, 93.9, 94.1, 93.0, 92.8, 93.7, 94.2,
        93.1, 92.9
      ]
    }
  }
  // alarmNum()
  //   .then((res) => {
  //     console.log("右上--报警次数 ", res);
  //     if (res.success) {
  setOption(res.data.dateList, res.data.op60yieldList, res.data.op130yieldList, res.data.op140yieldList);
  //   } else {
  //     ElMessage({
  //       message: res.msg,
  //       type: "warning",
  //     });
  //   }
  // })
  // .catch((err) => {
  //   ElMessage.error(err);
  // });
};
const setOption = async (xData: any[], yData1: any[], yData2: any[], yData3: any[]) => {
  option.value = {
    legend: {
      data: ['胶面高度检测良率', '发泡胶轮廓检测良率', '泄露测试检测良率'],
      top: 0,
      left: 'center',
      orient: 'horizontal',
      textStyle: { color: '#B4B4B4' }
    },
    xAxis: {
      type: "category",
      data: xData,
      boundaryGap: false, // 不留白，从原点开始
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#7EB7FD",
        fontWeight: "500",
        interval: 6,
        //rotate: 30,
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#7EB7FD",
        fontWeight: "500",
        formatter: '{value} %',  // 关键配置：在数值后添加%
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      borderWidth: 1, // 增加边框宽度，更清晰
      textStyle: {
        color: "#FFF",
        fontSize: 12 // 调整文字大小，提升可读性
      },
      // 关键：自定义tooltip内容，为每个数值添加%
      formatter: function (params) {
        // params是数组，包含当前轴上所有系列的数据
        // 1. 先添加x轴的名称（如日期/时间）作为标题
        let tooltipContent = params[0].name + "<br/>";

        // 2. 遍历每个系列，拼接「系列名: 值%」
        params.forEach(item => {
          // item.seriesName是系列名称（如"OP60测高良率"）
          // item.value是当前数值，拼接%
          tooltipContent += `${item.marker} ${item.seriesName}: ${item.value}%<br/>`;
        });

        return tooltipContent;
      }
    },
    grid: {
      //布局
      show: true,
      left: "10px",
      right: "30px",
      bottom: "10px",
      top: "35px",
      containLabel: true,
      borderColor: "#1F63A3",
    },
    series: [
      {
        data: yData1,
        type: "line",
        smooth: true,
        symbol: "none", // 去除数据点
        name: "胶面高度检测良率", // 明确的系列名称 //OP60
        color: "#FF7A00", // 鲜明的橙色，与其他系列区分
        label: {
          position: 'right',
          show: false,
          textStyle: {
            color: '#FF7A00', // 标签颜色与线条颜色一致
            fontSize: 12,
            fontWeight: 'bold', // 标签文字加粗，更易读
            backgroundColor: 'rgba(255,255,255,0.8)', // 白色背景，增强对比度
            padding: [2, 5], // 内边距，让标签更美观
            borderRadius: 3, // 圆角，避免尖锐
          }
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1,
            [
              { offset: 0, color: "rgba(255,122,0,0.3)" }, // 浅橙色，与线条呼应
              { offset: 1, color: "rgba(255,122,0,0)" }, // 透明
            ],
            false
          ),
        },
      },
      {
        data: yData2,
        type: "line",
        smooth: true,
        symbol: "none",
        name: "发泡胶轮廓检测良率",//OP130
        color: "#00B42A", // 鲜明的绿色，与其他系列区分
        label: {
          position: 'right',
          show: false,
          textStyle: {
            color: '#00B42A', // 标签颜色与线条颜色一致
            fontSize: 12,
            fontWeight: 'bold',
            backgroundColor: 'rgba(255,255,255,0.8)',
            padding: [2, 5],
            borderRadius: 3,
          }
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1,
            [
              { offset: 0, color: "rgba(0,180,42,0.3)" }, // 浅绿色，与线条呼应
              { offset: 1, color: "rgba(0,180,42,0)" }, // 透明
            ],
            false
          ),
        },
      },
      {
        data: yData3,
        type: "line",
        smooth: true,
        symbol: "none",
        name: "泄露测试检测良率", // OP140
        color: "#1E88E5", // 鲜明的蓝色，与其他系列区分
        label: {
          position: 'right',
          show: false,
          textStyle: {
            color: '#1E88E5', // 标签颜色与线条颜色一致
            fontSize: 12,
            fontWeight: 'bold',
            backgroundColor: 'rgba(255,255,255,0.8)',
            padding: [2, 5],
            borderRadius: 3,
          }
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1,
            [
              { offset: 0, color: "rgba(30,136,229,0.3)" }, // 浅蓝色，与线条呼应
              { offset: 1, color: "rgba(30,136,229,0)" }, // 透明
            ],
            false
          ),
        },
      }
    ],
  };
};
onMounted(() => {
  getData();
});
</script>

<template>
  <VueEcharts class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
</template>

<style scoped lang="scss"></style>
